<template>
  <VbDemo class="va-pagination-demo">
    <VbCard>
      Current Page
      <input
        v-model.number="activePage"
        aria-hidden="true"
        type="number"
      />
    </VbCard>
    <VbCard>
      <table class="table table-bordered">
        <tr>
          <th>Description</th>
          <th>VaPagination</th>
        </tr>
        <tr>
          <td>Default</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Disabled</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                disabled
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Presets</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="default"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="primary"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="secondary"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Gapped</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                gapped
                buttons-preset="default"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                gapped
                buttons-preset="primary"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                gapped
                buttons-preset="secondary"
              />
            </VbCard>
          </td>

        </tr>
        <tr>
          <td>Visible Pages</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                buttons-preset="default"
              />
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                buttons-preset="primary"
              />
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                buttons-preset="secondary"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Bordered</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                buttons-preset="default"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                buttons-preset="primary"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                buttons-preset="secondary"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Rounded</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                rounded
                buttons-preset="default"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                rounded
                buttons-preset="primary"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                border-color="primary"
                gapped
                rounded
                buttons-preset="secondary"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Custom active page color</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="default"
                active-page-color="warning"
                gapped
                rounded
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="primary"
                active-page-color="warning"
                gapped
                rounded
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                buttons-preset="secondary"
                active-page-color="warning"
                gapped
                rounded
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Sizes</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                size="small"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                size="medium"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                size="large"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Colored</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                color="info"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                color="danger"
              />
              <va-pagination
                v-model="activePage"
                :pages="5"
                color="warning"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Disabled</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                disabled
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Without Links</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :boundary-links="false"
                :pages="10"
                :visible-pages="3"
              />
              <va-pagination
                v-model="activePage"
                :direction-links="false"
                :pages="10"
                :visible-pages="3"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Icons</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                direction-icon-left="volume_mute"
                direction-icon-right="volume_down"
              />
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                boundary-icon-left="volume_off"
                boundary-icon-right="volume_up"
              />
              <va-pagination
                v-model="activePage"
                :pages="10"
                :visible-pages="3"
                boundary-icon-left="volume_off"
                boundary-icon-right="volume_up"
                direction-icon-left="volume_mute"
                direction-icon-right="volume_down"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Input</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="20"
                input
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Input without links</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="20"
                input
                :boundary-links="false"
                :direction-links="false"
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Boundary Icons</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="20"
                :visible-pages="7"
                boundary-numbers
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Plain with input</td>
          <td>
            <VbCard>
              <va-pagination
                v-model="activePage"
                :pages="5"
                input
                plain
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Stateful</td>
          <td>
            <VbCard>
              <va-pagination
                :pages="5"
                stateful
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Use context</td>
          <td>
            <VbCard>
              <va-config :components="{
        VaPagination: {
          color: 'danger',
          pages: 10,
          visiblePages: 3,
          input: true,
        }
      }">
                <va-pagination />
              </va-config>
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Use total and page size</td>
          <td>
            <VbCard>
              <div>
                Page size:
                <input v-model.number="pageSize" aria-hidden="true" type="number">
              </div>
              <div>
                Total:
                <input v-model.number="total" aria-hidden="true" type="number">
              </div>
              <va-pagination
                v-model="activeTotalPage"
                :page-size="pageSize"
                :total="total"
                :visible-pages="7"
                boundary-numbers
              />
              <div>
                Value: {{ activeTotalPage }}
              </div>
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Hide on single page</td>
          <td>
            <VbCard>
              <va-pagination
                :pages="1"
                hide-on-single-page
              />
            </VbCard>
          </td>
        </tr>
        <tr>
          <td>Long pagination (should be trunked)</td>
          <td>
            <VbCard>
              <va-pagination
                :pages="100"
              />
            </VbCard>
          </td>
        </tr>
      </table>
    </VbCard>
  </VbDemo>
</template>

<script>
import { VaPagination } from './index'
import { VaConfig } from '../va-config'

export default {
  components: {
    VaPagination,
    VaConfig,
  },

  data () {
    return {
      activePage: 4,
      activeTotalPage: 3,
      pageSize: 10,
      total: 100,
    }
  },
}
</script>

<style lang="scss">
.va-pagination-demo {
  & .va-pagination {
    padding: 1rem;
  }
}
</style>
